import React from "react";
import { useModel } from "umi";
import { Slider } from "antd";

const sizes = ["xs", "sm", "md", "lg", "xl", "xxl"];

function Grider({ changeKey }) {
  const { initialState, setInitialState } = useModel("@@initialState");
  const { auto } = initialState;
  const changeVal = initialState[changeKey];

  return auto ? (
    <div className="column" style={{ gap: 6 }}>
      {sizes.map((it) => {
        return (
          <div key={it} className="slider">
            <span style={{ width: 30, display: "block" }}>{it}</span>
            <Slider
              min={1}
              max={24}
              style={{ flex: 1 }}
              value={changeVal?.colProps?.[it]}
              size="small"
              onChange={(val) => {
                setInitialState((s) => {
                  let cur = {
                    ...s[changeKey].colProps,
                    [it]: val,
                  };
                  delete cur.span;
                  return {
                    ...s,
                    [changeKey]: {
                      ...s[changeKey],
                      colProps: cur,
                    },
                  };
                });
              }}
            ></Slider>
          </div>
        );
      })}
    </div>
  ) : (
    <div className="slider">
      <span style={{ width: 40, display: "block" }}>span</span>
      <Slider
        min={1}
        max={24}
        style={{ flex: 1 }}
        value={changeVal?.colProps?.span}
        size="small"
        onChange={(val) => {
          setInitialState((s) => ({
            ...s,
            [changeKey]: {
              ...s[changeKey],
              colProps: {
                span: val,
              },
            },
          }));
        }}
      ></Slider>
    </div>
  );
}

export default Grider;
